<template>
   <div ref="ageCom">{{ obj.age }}</div>
   <!-- <div>{{ str }}</div>
   <div>{{ num }}</div>
   <div>{{ b }}</div>
   <button @click="changeObjAge">obj.age++</button>
   <button @click="changStr">changStr</button>
   <button @click="changNum">changNum</button>
   <button @click="changB">changB</button> -->
   <!--  -->
   <hr>
   <!-- 深层次响应 -->
   <div>{{ obj.likes.study }}</div>
   <div>{{ obj.likes.sport }}</div>
   <button @click="changeSport">changeSport</button>
    <!-- 浅层响应 -->
    <div>{{ proxyObj.fun.bark }}</div>
    <div>{{ proxyObj.name }}</div>
    <button @click="changeBark">changBark</button>
    <button @click="changeName">changName</button>
</template>
<script setup>
  import { reactive,ref,nextTick,shallowReactive } from 'vue';
  // <script setup> 是组合式 语法糖
  // 在 <script setup> 语法糖 顶层导入的 或 声明的 变量可以直接使用
  const count = 0;
  // vue3 中的响应式 reactive  ref

  // reactive 只能是 对象 或 数组 
  // reactive 不支持基本数据类型 string,number,boolean
  // 操作的都是代理对象

  const raw = {
    name:'张三',
    age:18,
    likes:{
      sport:['跑步','打篮球'],
      study:['codeing','reading']
    }
  }
  const proxyObj = shallowReactive({
    name:'花花',
    fun:{
      bark:'喵喵',
      run:'跑'
    }
  })
  // 获取组件
  const ageCom = ref(null)
  const obj = reactive(raw)
  console.log("obj==>",obj);
  // 代理对象 和 原始对象不相等
  console.log(obj===raw);
  const changeObjAge = ()=>{
    obj.age++
    // DOM 更新时机
    console.log('ageCom.value.innerText==>',ageCom.value.innerText);
    console.log('ageCom.value.textContent==>',ageCom.value.textContent);
    nextTick(()=>{
      console.log('nextTick ageCom.value.innerText==>',ageCom.value.innerText);
      console.log('nextTick ageCom.value.textContent==>',ageCom.value.textContent);
    })
  }

 const changeSport = ()=>{
    obj.likes.sport.push('乒乓球')
 }

 const changeBark = ()=>{
    proxyObj.fun.bark = "miaomiao"
 }
 const changeName = ()=>{
  proxyObj.name="招财"
 }


  // const str = reactive('hello')
  // const changStr = ()=>{
  //   str="你好"
  // }
  // const num = reactive(123)
  // const changNum = ()=>{
  //   num=456
  // }
  // const b = reactive(true)
  // const changB = ()=>{
  //   b=false
  // }


  let demo = reactive({count:0})
  
  demo = reactive({count:18})
  demo.count++
  console.log(demo.count);

  // reactive
  // 1. 深层响应对象
  // 2. DOM 访问时机 nexTick
  // 3. 代理对象 和 原始对象 不相等
  // 4. 局限性 [] Map Set obj


  // shallReactive
  // 1. 浅层响应对象

</script>
<style></style>